<template>
  <ConfigForm :configs="createForm" :server="{ post: batchAssignArrears }" :beforeSubmit="beforeSubmit" />
</template>

<script setup lang="jsx">
import { batchAssignArrears } from '@/api/arrears'
import ConfigForm from '@/components/CRUD/ConfigForm.vue'
import OrganizationDialog from '@/components/Organization/OrganizationDialog.vue'

const props = defineProps({
  infoList: {
    type: Array,
    default: () => []
  },
})

const composeName = (v) => {
  return `${v.company_name}/${v.community_name}`
}
const createForm = [
  {
    label: '',
    key: 'ids',
    type: 'custom',
    defaultValue: props.infoList.map(v => v.arrears_data_id),
    render: () => props.infoList.length === 1 ? (
      <div class="flex w-full gap-4">
        <span>{composeName(props.infoList[0])}</span>
        <span>{props.infoList[0].address}</span>
        <span>{props.infoList[0].name}</span>
        <span>{props.infoList[0].mobile}</span>
        <span>{props.infoList[0].case_reason}</span>
      </div>
    ) : (
      <el-tooltip
        v-slots={{
          content: () => <div class="whitespace-pre-line">{props.infoList.map(composeName).join('\n')}</div>,
        }}
      >
        <div>已选择【{composeName(props.infoList[0])}】等{props.infoList.length}条数据</div>
      </el-tooltip>
    )
  },
  {
    label: '跟案律师',
    key: 'assign_user',
    type: 'custom',
    required: true,
    props: { placeholder: '请选择跟案律师', type: 'user' },
    render: OrganizationDialog
  },
]

const beforeSubmit = (params) => {
  const newParams = {
    ids: params.ids,
    assign_user_id: params.assign_user.user_id,
  }
  return newParams
}
</script>